import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 使用 defineStore 创建 store，第一个参数为仓库ID，第二个参数是回调函数，在里面定义全局变量和修改变量的方法
/**
 * 步骤：
 * 1、导入 defineStore 函数
 * 2、使用 defineStore('仓库ID', () => { 定义全局变量和修改变量的方法 })
 *    注意：仓库ID 必须保证全局唯一，不能有多个仓库有相同的 ID，ID 的作用可以在浏览器调试工具中显示
 * 3、导出创建的 store => store 的名字建议 useXXXXStore 来命名
 */
export const useTestStore = defineStore('test', () => {
  // 1、使用 ref 或者 reactive 定义 state 变量或者修改变量方法
  const testCount = ref(555)

  // 2、定义 mutations 方法修改变量
  const changeTestCount = () => {
    testCount.value++
  }

  // 3、定义 gatters ，使用 computed 函数
  const doubleTestCount = computed(() => {
    return testCount.value * 2
  })

  // 4、定义 actions ，只需定义一个普通的异步函数即可
  const cahngeTestCountByAsync = async () => {
    await setTimeout(() => {
      testCount.value = 99999
    }, 2000)
  }

  // 5、返回定义的变量和修改变量的方法
  // 必须返回才能在组件中获取到
  return {
    testCount,
    changeTestCount,
    doubleTestCount,
    cahngeTestCountByAsync
  }
})
